<template>
	<button @click="goBack">返回</button>
	<div class="container">
		
		<div class="left-side">
			<img src="/public/sheng.jpg" class="img-small" />
		</div>
		<div class="right-side">
			<table class="tab" v-for="index in xq" :key="index.id">
				<tr>
					<th>{{index.name}}</th>
					<td>{{index.name_new}}</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- </div> -->
	
</template>

<script setup>
	import {
		useRouter
	} from 'vue-router';
	const router = useRouter()
	const goBack = () => {
		router.back()
	}
	const xq = ([
		{
			name: "生行：",
			name_new: "中国戏曲表演主要行当之一。泛指净、丑之外的男角色。生的名目最早见于宋元南戏，指剧中男主角，与元杂剧的正末相当。清以后又衍化为老生、小生、外、末4个支系。按其扮演人物属性、性格特征和表演特点，大致可分为老生、小生、外、末、武生、娃娃生等类。老生主要扮演中年以上性格正直刚毅的正面人物，因多戴髯口，故又称须生，俗称胡子生。京剧老生行又分唱功、做功、靠把和武老生，另有红生一行，主要扮演关羽，因勾红脸，故又称红生。",

		}
	])
</script>

<style lang="less" scoped>
	.tab {
		line-height: 50px;
		margin-left: 30px;
	}
	.btn{
		margin-left: 30px;
	}
	.img-small {
		width: 600px;
		height: 500px;
	}

	.container {
		display: flex;
	}
	.right-side {
		margin-right: 300px;
		margin-top: 50px;
	}
</style>